<script setup>
import {onMounted} from "vue";
import PageHeader from "@/views/Common/PageHeader.vue";
import {getUserShopAPI} from "@/apis/user.js";
import {useUserStore} from "@/stores/user.js";
import HomePage from "@/views/HomePage/HomePage.vue";
import {useRouter} from 'vue-router'

const router = useRouter()

onMounted(()=>{
  updateShopInfo()
})

const updateShopInfo=async ()=>{
  const res=await getUserShopAPI(useUserStore().userInfo.uid)

  if(res.code===200){
    useUserStore().loadShop(res.data)
  }
}

const goToHome = () => {
  router.push('/homepage')
}

const openAdminChat = () => {
  window.open('http://localhost:8080/admin-chat', '_blank')
}

</script>

<template>
  <div class="myInfoPage">

    <div>
      <PageHeader></PageHeader>
    </div>
    <div class="header">
      <img @click="goToHome" style="height: 60px;width: auto;margin-left: 40px;margin-top: 20px" src="@/assets/SAS-logo.png" alt="">
    </div>

    <div class="page-container">
      <div class="content">

        <div class="nav-menu">
          <el-menu
              :default-active="$route.path"
              class="UC_menu"
              router>

            <el-menu-item index="/homepage">
              <span>首页</span>
            </el-menu-item>

            <el-sub-menu index="/myShop/info">
              <template #title>
                <span>我的店铺</span>
              </template>
              <el-menu-item-group >
                <el-menu-item index="/myShop/info">店铺资料</el-menu-item>
                <el-menu-item index="/myShop/data">数据统计</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="/myShop/order">
              <template #title>
                <span>订单管理</span>
              </template>
              <el-menu-item-group >
                <el-menu-item index="/myShop/order">订单列表</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="/myShop/goods" >
              <template #title>
                <span>商品管理</span>
              </template>
              <el-menu-item-group >
                <el-menu-item index="/myShop/goods">商品列表</el-menu-item>
                <el-menu-item index="/myShop/release">发布商品</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="/myShop/service" >
              <template #title>
                <span>客服管理</span>
              </template>
              <el-menu-item-group >
                <el-menu-item index="/myShop/service" @click="openAdminChat">管理私信</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

          </el-menu>
        </div>

        <div class="router-view">
          <router-view></router-view>
        </div>

      </div>
    </div>

  </div>

</template>

<style scoped lang="less">
.myInfoPage {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f9fa;
}

.header {
  width: 100%;
  height: 80px;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  padding: 0 40px;
}

.page-container {
  flex: 1;
  width: 100%;
  padding: 30px 20px;
}

.content {
  display: flex;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start;
}

.nav-menu {
  width: 240px;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  flex-shrink: 0;

  .UC_menu {
    border-right: none;
    background-color: transparent;

    .el-menu-item {
      margin: 8px 0;
      height: 48px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.3s;
      
      &:hover {
        background-color: #f0f7ff;
        color: #007bff;
        transform: translateX(4px);
      }
      
      &.is-active {
        background-color: #007bff;
        color: white;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
      }
    }

    .el-sub-menu {
      .el-sub-menu__title {
        height: 48px;
        font-size: 14px;
        font-weight: 600;
        color: #333;
        transition: all 0.3s;
        
        &:hover {
          background-color: #f0f7ff;
          color: #007bff;
        }
      }
      
      .el-menu {
        background-color: transparent;
        
        .el-menu-item {
          margin: 4px 0;
          height: 40px;
          font-size: 13px;
          padding-left: 40px;
          
          &:hover {
            background-color: #f8f9fa;
            transform: translateX(2px);
          }
          
          &.is-active {
            background-color: #e3f2fd;
            color: #007bff;
            font-weight: 600;
          }
        }
      }
    }
  }
}

.router-view {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  min-height: 600px;
}
</style>